<template>
	<el-table :data="data" border style="width: 100%" :row-style="showTr">
		<el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" :width="column.width">
			<template scope="scope">
				<span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
				<span v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
		          	<i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
		          	<i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
		        </span>
				<span v-else-if="index===0" class="ms-tree-space"></span>
				
				<span class="txt-length">{{scope.row[column.dataIndex]}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" v-if="treeType === 'normal'" width="115" scope="scope">
			<template scope="scope">
			    <el-tooltip v-if="!scope.row.HasChild" class="item" effect="dark" content="详情" placement="bottom">
			      	<el-button type="info" size="mini" icon="custom-detail" class="m-r-10" @click.native="emitJumpToComponent(scope.row.ID,'detail')"></el-button>
			    </el-tooltip>
			    <el-tooltip v-if="!scope.row.HasChild" class="item" effect="dark" content="办事员" placement="bottom">
			      	<el-button type="success" size="mini" icon="custom-user" class="m-r-10" @click.native="emitJumpToComponent(scope.row.ID,'clerk')"></el-button>
			    </el-tooltip>
			</template>
		</el-table-column>
	</el-table>
</template>
<script>
  import Svc from '../../service/index.js';
  import MSDataTransfer from './utils/index.js'
  export default {
  	data () {
  		return {
  			hasActions : {
  				hasManufAdd : false,
  				hasManufUpdate : false,
  				hasManufDel : false
  			}
      	}
    },
    props: {
		// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
      	treeStructure: {
        	type: Boolean,
        	default: function () {
          		return false
        	}
      	},
	  	// 这是相应的字段展示
      	columns: {
        	type: Array,
    		default: function () {
          		return []
	        }
	  	},
		// 这是数据源
	    dataSource: {
	        type: Array,
	        default: function () {
	          return []
	        }
	    },
		// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
      	requestUrl: {
        	type: String,
        	default: function () {
          		return ''
        	}
      	},
		// 这个是是否展示操作列
      	treeType: {
    		type: String,
        	default: function () {
          		return 'normal'
    		}
    	},
		// 是否默认展开所有树
	    defaultExpandAll: {
	        type: Boolean,
	        default: function () {
	          return false
	        }
	    }
	},
    computed: {
      // 格式化数据源
      data: function () {
        let me = this
        if (me.treeStructure) {
          let data = MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
          return data
        }
        return me.dataSource
      }
    },
    methods: {
      	// 显示行
      	showTr: function (row, index) {
        	let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
        	row._show = show
        	return show ? '' : 'display:none;'
      	},
    	// 展开下级
      	toggle: function (trIndex) {
        	let me = this
        	let record = me.data[trIndex]
        	record._expanded = !record._expanded
      	},
    	// 显示层级关系的空格和图标
      	spaceIconShow (index) {
        	let me = this
        	if (me.treeStructure && index === 0) {
          		return true
        	}
        	return false
      	},
    	// 点击展开和关闭的时候，图标的切换
      	toggleIconShow (index, record) {
        	let me = this
        		if (me.treeStructure && index === 0 && record.SubItems && record.SubItems.length > 0) {
          			return true
        		}
        	return false
      	},
    	//显示message提示框
        openMessage : function(msg,type){
	        this.$message({
	          	showClose: true,
	          	message: msg,
	          	type: type
	        });
        },
        //自定义事件->组件跳转
		emitJumpToComponent(id,nextComponent){
			this.$emit('jump-detail-update',id,nextComponent)
		}
   	},
	mounted() {
	}
}
</script>
<style scoped>
  .ms-tree-space{
  	position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;
  }
  
  .ms-tree-space::before{
  	content: "";
  }
  
  table td{
    line-height: 24px;
  }
  
  .txt-length{
  	overflow:hidden;
  	text-overflow:ellipsis; 
  	-o-text-overflow:ellipsis;
  	white-space:nowrap;
  }
  
  .m-r-10{
  	margin-left: 0px !important;
  	margin-right: 10px !important;
  }
</style>
